<template>
  <div class="oauth-config">
    <PageHeaderWrapper />
    <a-card style="margin-top: 10px" :loading="loading">
      <a-input-search v-model="search.config_name" placeholder="请输入配置名称" @search="searchConfig" style="width: 260px" />
    </a-card>

    <a-card style="margin-top: 10px" title="配置信息" :loading="loading">
      <a-button slot="extra" type="primary" @click="showAddConfig">添加配置</a-button>
      <a-table
        :columns="tableColumns"
        :data-source="data"
        :rowKey="record=>record.config_id"
        :pagination="pagination"
      >
        <template slot="config_type" slot-scope="text, record">
          {{ title[record.config_type] }}
        </template>
        <template slot="operation" slot-scope="text, record">
          <a style="float: left; margin-right: 10px;" type="primary" @click="showUpdateConfig(record)">配置编辑</a>
          <div class="editable-row-operations">
            <a-popconfirm title="确定删除该配置？" @confirm="deleteConfig(record)">
              <a>删除</a>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
    </a-card>
    <a-drawer
      title="配置编辑"
      placement="right"
      :width="720"
      :closable="false"
      :visible="visible"
      @close="visible = false"
    >
      <OConfigModal
        :form-table="formTable"
        :info="selectData"
        :form-name="title[selectData['config_type']]"
        @close="closeDrawer"
      />
    </a-drawer>
  </div>
</template>

<script lang='javascript'>
import {
  formTable,
  title,
  getConfig,
  tableColumns,
  deletes
  // addConfig
} from './js/oauthConfig'
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'

import OConfigModal from './components/OConfigModal'

export default {
  name: 'OauthConfig',
  components: {
    PageHeaderWrapper,
    OConfigModal
  },
  data () {
    return {
      formTable,
      title,
      tableColumns,
      loading: true,
      visible: false,
      data: [],
      search: {
        config_name: '',
        page: 1,
        time: new Date()
      },
      pagination: {
        onChange: (page) => {
          this.search.page = page
          this._getConfig()
        }
      },
      selectData: {
        config_id: '',
        config_name: '',
        config_type: 0,
        config_info: {}
      }
    }
  },
  mounted () {
    this._getConfig()
  },
  methods: {
    searchConfig () {
      this.search.page = 1
      this._getConfig()
    },
    _getConfig () {
      getConfig(this.search).then(res => {
        this.loading = false
        this.pagination.total = res.count
        this.data = res.items
      })
    },
    showAddConfig () {
      this.selectData = {
        config_id: '',
        config_name: '',
        config_type: 0,
        config_info: {}
      }
      this.visible = true
    },
    showUpdateConfig (data) {
      this.selectData = {
        config_id: data.config_id,
        config_name: data.config_name,
        config_type: this.title[data.config_type],
        config_info: JSON.parse(data.config_info)
      }
      this.visible = true
    },
    deleteConfig (data) {
      deletes(data).then(res => {
        if (res.code === 200) {
          this._getConfig()
        }
        this.$message[res.code === 200 ? 'success' : 'warning'](res.msg)
      })
    },
    closeDrawer (data) {
      this._getConfig()
      this.visible = false
    }
  }
}
</script>

<style lang="less">
</style>
